import { CloseOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import { Modal, Button, Select, Form, Input, DatePicker, message } from 'antd';
import { useState, useEffect } from 'react';
import Avatar from './Upload';
import BaiduMap from './Map';
import http from '../../utils/http';

const { Option } = Select;


const Add = ({ isshowAdd, setAdd, getAllData }) => {
  const [isEditlVisible, setEdit] = useState(false);
  const [address, setAddress] = useState('四川省成都市');
  const [addData, setData] = useState({});
  const [form] = Form.useForm();
  useEffect(() => {
    let obj = addData;
    obj.proAddr = address;
    setData(obj);
  }, [address])
  const onReset = () => {
    form.resetFields();
  };
  const changeData = (e, value, name) => {
    let obj = addData;
    if (e.target) {
      obj[name] = e.target.value;
    } else if (value.value || value.value == 0) {
      obj[name] = value.value;
    } else {
      obj[name] = value;
    }
    setData(obj);
  }
  const submitData = () => {
    console.log(addData)
    http({
      url: '/project/addProjectInfo',
      method: 'post',
      data: addData
    }).then((res) => {
      if (res.code == 200) {
        message.success('添加成功！');
        setAdd(false);
        getAllData();
      } else {
        message.error('服务端出错，请联系管理员');
      }
    })
  };
  return <div className="Addmain" style={{ display: !isshowAdd ? 'none' : 'block' }}>
    <Modal visible={isEditlVisible} onOk={() => { setAdd(false); setEdit(false); onReset(); }} onCancel={() => { setEdit(false) }} width={250} cancelText='取消' okText='确定' style={{ top: '40%' }}>
      <div><ExclamationCircleOutlined style={{ color: 'rgb(255,153,0)' }} /><span>您确认关闭此页面吗？</span></div>
    </Modal>
    <div className="titleTop">
      <div className='icon'></div>
      <p>项目信息新增</p>
      <CloseOutlined className='close' onClick={() => { setEdit(true) }} />
    </div>
    <Form autoComplete="off" form={form}>
      <div className='dataBar'>
        <div className='titleTop'>项目基本信息</div>
        <div className='com'>
          <div className='com1'>
            <Form.Item
              label="项目名称"
              name="proName"
              rules={[{ required: true, message: '请输入项目名称' }]}
            >
              <Input style={{ width: '525px' }} placeholder='请输入项目名称' onChange={(e, value) => { changeData(e, value, 'proName') }} value={addData.proName} />
            </Form.Item>
            <Form.Item
              label="项目编号"
              name="proNum"
              rules={[{ required: true, message: '请输入项目编号' }]}
            >
              <Input type='number' placeholder='请输入项目编号' onChange={(e, value) => { changeData(e, value, 'proNum') }} />
            </Form.Item>
            <Form.Item
              label="项目类型"
              name="proType"
              rules={[{ required: true, message: '请输入项目类型' }]}
            >
              <Select placeholder="请选择" style={{ width: 200 }} onChange={(e, value) => {
                changeData(e, value, 'proType')
              }}>
                <Option value={0}>软件集成</Option>
                <Option value={1}>硬件集成</Option>
                <Option value={2}>软硬一体</Option>
              </Select>
            </Form.Item>
            <Form.Item
              label="用户类型"
              name="usType"
              rules={[{ required: true, message: '请选择用户类型' }]}
            >
              <Select placeholder="请选择" style={{ width: 200 }} onChange={(e, value) => {
                changeData(e, value, 'usType')
              }}>
                <Option value={0}>科技园区</Option>
                <Option value={1}>娱乐城</Option>
              </Select>
            </Form.Item>
            <Form.Item
              label="项目状态"
              name="proState"
              rules={[{ required: true, message: '请选择项目状态' }]}
            >
              <Select placeholder="请选择" style={{ width: 200 }} onChange={(e, value) => {
                changeData(e, value, 'proState')
              }}>
                <Option value={1}>建设中</Option>
                <Option value={0}>已竣工</Option>
              </Select>
            </Form.Item>
            <Form.Item
              label="开工时间"
              name="proStarttime"
              rules={[{ required: true, message: '请选择开工时间' }]}
            >
              <DatePicker style={{ width: 200 }} placeholder="请选择日期时间" onChange={(e, value) => {
                changeData(e, value, 'proStarttime')
              }} />
            </Form.Item>
            <Form.Item
              label="上线时间"
              name="proTime"
              rules={[{ required: true, message: '请选择上线时间' }]}
            >
              <DatePicker style={{ width: 200 }} placeholder="请选择日期时间" onChange={(e, value) => {
                changeData(e, value, 'proTime')
              }} />
            </Form.Item>
          </div>
          <div className='com2'>
            <Form.Item
              label="项目地址"
              name="proAddr"
              rules={[{ required: true, message: '' }]}
            >
              <>
                <Input disabled={true} style={{ width: 300 }} value={address} onChange={(e, value) => {
                  changeData(e, value, 'proAddr')
                }} />
              </>
            </Form.Item>
            <div className='map'>
              <BaiduMap setAddress={setAddress} />
            </div>
          </div>
        </div>
      </div>
      <div className='dataAnnex'>
        <div className='titleTop'>项目附件</div>
        <div className='com com3'>
          <Form.Item
            label="开工报告"
            name="startReport"
            rules={[{ required: true, message: '请上传图片' }]}
          >
            <Avatar actionData={addData} setData={setData} name='startReport' />
          </Form.Item>
          <Form.Item
            label="安装图纸"
            name="installDrawings"
            rules={[{ required: true, message: '请上传图片' }]}
          >
            <Avatar actionData={addData} setData={setData} name='installDrawings' />
          </Form.Item>
          <Form.Item
            label="设备报告"
            name="equipmentReport"
            rules={[{ required: true, message: '请上传图片' }]}
          >
            <Avatar actionData={addData} setData={setData} name='equipmentReport' />
          </Form.Item>
          <Form.Item
            label="验收报告"
            name="acceptanceReport"
            rules={[{ required: true, message: '请上传图片' }]}
          >
            <Avatar actionData={addData} setData={setData} name='acceptanceReport' />
          </Form.Item>
          <Form.Item
            label="使用手册"
            name="userManual"
            rules={[{ required: true, message: '请上传图片' }]}
          >
            <Avatar actionData={addData} setData={setData} name='userManual' />
          </Form.Item>
          <Form.Item
            label="设备清单"
            name="equipmentList"
            rules={[{ required: true, message: '请上传图片' }]}
          >
            <Avatar actionData={addData} setData={setData} name='equipmentList' />
          </Form.Item>
        </div>
      </div>
      <Form.Item wrapperCol={{ offset: 10, span: 16 }} style={{ marginBottom: 0 }}>
        <Button type="primary" htmlType="submit" onClick={submitData}>
          保存
        </Button>
        <Button onClick={onReset}>
          重置
        </Button>
      </Form.Item>
    </Form>

  </div>
}

export default Add;